<template>
	<div class="tenant-container">
        <div class="btn-group">
            <el-button type="primary" icon="el-icon-plus" @click="onClickAdd">{{ translate('button.add') }}</el-button>
            <el-button type="danger" size="small" icon="el-icon-delete" plain @click="onDelete()" >{{ translate('button.delete') }}</el-button>
        </div>
        <base-table :data="rolesData"
                    :checked="checkedData"
                    :option="tableOption"
                    :height="'calc(100vh - 360px)'"
                    :loading="loadingState"
                    :filter-enable="true"
                    :page-sizes="pageSizes"
                    rowKey="roleId"
                    stripe
                    @sort-change="onSortChange"
                    @select="onSelect"
                    @refresh="getRolesInfo"
                    @pageChange="onPageChange"
                    @sizeChange="onSizeChang">
            <!--操作图标和提示文字-->
            <template slot="table-slot-operation" slot-scope="scope">
                <div class="instance-btn-container">
                    <el-tooltip class="item" :content="translate('button.edit')" placement="top">
                        <i class="iconfont icon-other_bianji" @click.stop="onClickUpdateInfo(scope.row)"/>
                    </el-tooltip>
                    <el-tooltip class="item" :content="translate('label.rolesAuthorization')" placement="top">
                        <i class="iconfont icon-shujuquanxian"/>
                    </el-tooltip>
                    <el-tooltip class="item"
                                :content="translate('label.assignUsers')" placement="top">
                        <i class="iconfont icon-01_yonghuguanli" @click="showPersonSelection = true"/>
                    </el-tooltip>
                    <el-tooltip class="item" :content="translate('button.copy')" placement="top">
                        <i class="iconfont icon-fuzhi1" @click="onCopy(scope.row)"/>
                    </el-tooltip>
                </div>
            </template>
        </base-table>

        <!--人员选择弹窗-->
        <person-selection v-model="showPersonSelection"
                          :params="{orderBy:[],data:{}}"
                          default-checked="sys/chooseUserData/findAllUserList"
                          :select-type="selectType.checkbox"
                          :checked-max="27"
                          :include-tabs="[PersonSelectionTabsEnum.role,PersonSelectionTabsEnum.orgTree]"
                          @tabs-change="tabsChange"
                          @sure="personSelect"
                          @cancel="showPersonSelection = false">
            <div slot="pane-customer" :slot-title="translate('label.accordUserGroup')" slot-scope="scope">
                <h3 @click="testSlot(scope.tabs)">title</h3>
                <div>
                    123
                </div>
            </div>
        </person-selection>

        <!--新增的弹窗-->
        <el-dialog
            :title="editFlag"
            :visible.sync="createDialogState"
            width="30%"
            :close-on-click-modal="false"
            @close="onCross">

            <el-form :model="addOrEditForm"
                     ref="addOrEditForm"
                     label-position="top"
                     label-width="100px"
                     class="demo-ruleForm"
                     :rules="rules">
                <el-form-item :hide-required-asterisk="true" :label="translate('label.rolesName')" prop="name">
                    <el-input v-model="addOrEditForm.name"></el-input>
                </el-form-item>
                <el-form-item :label="translate('label.displayOrder')" prop="sort">
                    <el-input v-model="addOrEditForm.sort"></el-input>
                </el-form-item>
                <el-form-item :label="translate('label.spareOne')" prop="backupOne">
                    <el-input v-model="addOrEditForm.backupOne"></el-input>
                </el-form-item>
                <el-form-item :label="translate('label.spareTwo')" prop="backupTwo">
                    <el-input v-model="addOrEditForm.backupTwo"></el-input>
                </el-form-item>
                <el-form-item :label="translate('label.comment')" prop="desc">
                    <el-input rows="5" type="textarea" v-model="addOrEditForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <el-form label-position="left">
                <el-form-item v-if="typeFlag===3" :label="translate('label.copyMode')">
                    <el-radio-group v-model="copyType">
                        <!--拷贝选项-->
                        <p class="choice"><el-radio :label="1">{{ translate('label.copyMenuPermissions') }}</el-radio></p>
                        <p class="choice"><el-radio :label="2">{{ translate('label.copyStaffAssignment') }}</el-radio></p>
                        <p class="choice"><el-radio :label="3">{{ translate('label.copyAuthorityOrDistribution') }}</el-radio></p>
                    </el-radio-group>
                </el-form-item>
            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="createDialogState = false">{{ translate('button.cancel') }}</el-button>
                <el-button type="primary" @click="onSaveInfo">{{ translate('button.sure') }}</el-button>
            </span>
        </el-dialog>
	</div>
</template>
<script lang="ts">
import {Component} from "vue-property-decorator";
import BaseVue from '@/common/base-vue'
import BaseTable from '@/components-sys/base-table/base-table.vue';
import ResponseModel from '@/common/model/response.model';
import {MessageTypeEnum, PageEnum, ResponseStatusEnum} from "../../../common/enum/common.enum";
import RequestModel from "../../../common/model/request.model";
import BaseTableOptionModel from "../../../components-sys/base-table/model/base-table-option.model";
import {ColumnTypeEnum, SelectionEnum} from "../../../components-sys/base-table/enums/base-table.enum";
import PagesModel from "../../../components-sys/pages/pages.model";
import RolesService from './roles-service'
import RolesFindModel from "./model/roles-model";
import PersonRequestModel from "../../../components-com/person-selection/model/person-request.model";
import OrderModel from "../../../common/model/order.model";
import _ from "lodash";
import PersonSelection from "@/components-com/person-selection/index";
import PersonModel from "../../../components-com/person-selection/model/person.model";
import {PersonSelectionTabsEnum} from '@/components-com/person-selection/enums/person-selection.enum';
import {isNumber} from "@/utils/validate";


@Component({components: {BaseTable,PersonSelection}})
export default class tenant extends BaseVue {
    /*请求参数*/
    private tableParams = new RequestModel();
    /*显示隐藏选人弹窗*/
    public showPersonSelection = false;
    public selectType = SelectionEnum;

    private PersonSelectionTabsEnum = PersonSelectionTabsEnum;

    private pageSizes:number[]=[10,20,50,100];

    /*表单参数*/
    private addOrEditForm:RolesFindModel = new RolesFindModel();
    private copyType:number = 1;

    /*数据信息*/
    private rolesData: ResponseModel<RolesFindModel[]> = new ResponseModel<RolesFindModel[]>();

    /*选中数据*/
    private checkedData: RolesFindModel[] = [];
    /*选中的Id*/
    private deleteArray:object[]=[];

    /*表格配置*/
    private tableOption: BaseTableOptionModel = new BaseTableOptionModel();

    /*表格loading状态*/
    private loadingState = false;

    private createDialogState = false;

    /*判断是新增还是编辑还是复制*/
    private editFlag:string='';
    private typeFlag:number=0;

    /*表单效验*/
    private rules: {
        sort: object;
    };

    private rogRules() {
        this.rules = {
            sort: [{validator: isNumber, message: this.translate('validate.isNumber'), trigger: 'blur'}],
        }
    };

    /**
    * 生命周期
    * */
    private created(){
        this.rogRules();
    };

    /**
     * 初始化表格配置
     * 请求列表数据
     */
    private mounted() {
        /*初始化请求参数*/
        this.tableParams.pageIndex = PageEnum.initPageIndex;
        this.tableParams.pageSize = PageEnum.initPageSize;
        this.tableParams.data = new PersonRequestModel();
        // this.tableParams.orderBy = new OrderModel();
        this.tableOption.selection = SelectionEnum.checkbox;
        this.tableOption.column = [
            {label: 'label.rolesName', prop: 'name', sortable: true, filterEnable: true},
            {label: 'label.displayOrder', prop: 'sort', sortable: true, filterEnable: true},
            {label: 'label.comment', prop: 'remark', sortable: true, filterEnable: true, showTip: true},
            {label: 'label.operation', prop: 'operation', sortable: false, type: ColumnTypeEnum.slot}
        ];
        this.getRolesInfo();
    };

    /**
     * 弹窗选择人员
     */
    public personSelect(list:PersonModel){
        console.log(list)
        // this.showPersonSelcetion = false;
    }

    /**
     * 获取当前切换的插槽tabs
     */
    private testSlot(val){
        console.log(val)
    };
    private tabsChange(val:string){
        console.log(val)
    };

    /**
     * 排序
     */
    private onSortChange(order: OrderModel) {
        if (_.isEmpty(order)) {
            delete this.tableParams.orderBy;
        } else {
            this.tableParams.orderBy = [order];
            this.getRolesInfo();
        }
    };

    /**
     * 获取列表数据
     */
    private getRolesInfo() {
        this.loadingState = true;
        RolesService.findRolesAll(this.tableParams).then((res: ResponseModel<RolesFindModel[]>) => {
            this.rolesData=res
        }).finally(() => this.loadingState = false);
    };

    /**
     * 选中数据
     */
    private onSelect(data: RolesFindModel[]) {
        this.checkedData = data;
        // 拿到选中行的roleId
        this.deleteArray=[];
        for (let i=0; i < data.length; i++){
            this.deleteArray.push({roleId:data[i].roleId});
        }
    };

    /**
     * 新增和编辑的请求
    */
    private SaveInfo(){
        console.log(this.addOrEditForm)
        RolesService.addOrEditRoles(this.addOrEditForm).then((res) => {
            if (res.status === ResponseStatusEnum.success) {
                this.baseMessage("tips.saveSuccess", MessageTypeEnum.success);
                this.getRolesInfo();
                this.createDialogState = false;
            }
        }).finally(() => {
        });
    };

    /**
     * 用户点击保存 调请求
     */
    private onSaveInfo() {
        switch (this.typeFlag) {
            case 1:
                // 新增
                this.SaveInfo();
                break;
            case 2:
                // 编辑
                    this.SaveInfo();
                break;
            case 3:
                // 复制
                this.copyService();
                break;
            default:
                break;
        }
    };

    /**
    * 关闭弹窗时清空表单
    */
    private onCross(){
        this.addOrEditForm = new RolesFindModel();
    };

    /**
     * 新增信息
     */
    private onClickAdd() {
        this.createDialogState = true;
        this.editFlag = this.translate('label.addRoles');
        this.typeFlag = 1;
        this.addOrEditForm.code = '';
    };

    /**
     * 编辑信息
     */
    private onClickUpdateInfo(rowData?: RolesFindModel) {
        this.createDialogState = true;
        this.editFlag =this.translate('label.editRoles');
        this.typeFlag = 2;
        if (rowData) {
            this.addOrEditForm =  JSON.parse(JSON.stringify(rowData));
        }
    };

    /**
     * 拷贝数据
     */
    private onCopy(rowData?: RolesFindModel) {
        this.createDialogState = true;
        this.editFlag =this.translate('label.copyRoles');
        this.typeFlag = 3;
        this.addOrEditForm =  JSON.parse(JSON.stringify(rowData));
        this.addOrEditForm.code=null;
    };

    /**
    * 拷贝的请求
    */
    private copyService(){
        this.addOrEditForm.copyType = this.copyType;
        RolesService.copyRoles(this.addOrEditForm).then((res) => {
            console.log(res)
            if (res.status === ResponseStatusEnum.success) {
                this.baseMessage("label.copySuccess", MessageTypeEnum.success);
                this.createDialogState = false;
                // 更新数据清空表单
                this.getRolesInfo();
                this.addOrEditForm = new RolesFindModel();
            }
        }).finally(() => {
        })
    };

    /**
     * 删除
     */
    private onDelete() {
        if (this.deleteArray.length < 1) {
            this.baseMessage("tips.selectDataTip", MessageTypeEnum.warning);
            return;
        }
        this.baseConfirm('bizMsg.deletionTip', 'label.tips', () => {
            this.loadingState = true;
            RolesService.deleteRoles(this.deleteArray).then((res) => {
                if (res.status === ResponseStatusEnum.success) {
                    this.baseMessage("tips.deletionSuccess", MessageTypeEnum.success);
                    this.getRolesInfo();
                }
            }).finally(() => {
                this.loadingState = false;
            })
        }, () => {
        });
    };

    /**
     * 分页
     * @pageNum data
     * @private
     */
    private onPageChange(data: PagesModel) {
        this.tableParams.pageIndex = data.pageIndex;
        this.tableParams.pageSize = data.pageSize;
        this.getRolesInfo();
    };

    /**
    * 每页数量切换事件响应
    */
    private onSizeChang(data: PagesModel) {
        this.pageSizes = data.pageSizes;

    };

};
</script>
<style lang="scss" scoped>
.tenant-container {
	padding: 0 20px 0 0;
    .btn-group{
        margin-bottom: 20px;
    }

    .choice{
        padding: 10px 0;
    }
}
</style>
